<script setup>
import { ref, computed } from "vue";
import { useAuthStore } from "@/stores";
import { addPostService, postTopicsService } from "@/api/info";
import { useRouter } from "vue-router";

const authStore = useAuthStore();
const router = useRouter();

const userId = authStore.user.id; // 发帖人
const title = ref(""); // 标题
// 预设分类
const category = ref([
  { id: 1, name: "攻略", description: "strategy" },
  { id: 2, name: "讨论", description: "discuss" },
  { id: 3, name: "资料补充", description: "wiki" },
  { id: 4, name: "其他", description: "other" },
]);
// 预设tag
const postTag = ref([
  { id: 1, name: "新手指导", description: "新手" },
  { id: 2, name: "农场经营", description: "经营" },
  { id: 3, name: "矿洞探险", description: "探险" },
  { id: 4, name: "钓鱼技巧", description: "钓鱼" },
  { id: 5, name: "钓鱼技巧", description: "技能" },
  { id: 6, name: "游戏讨论", description: "讨论" },
]);
const topicTag = ref([
  { id: 1, name: "游戏讨论", description: "讨论" },
  { id: 2, name: "求助问答", description: "问答" },
  { id: 3, name: "经验分享", description: "分享" },
  { id: 4, name: "创意工坊", description: "工坊" },
]);
const content = ref(""); // 内容
const selectedCategory = ref(); // 跟踪当前选择的类别

// 计算属性，根据选择的类别返回对应的标签组
const currentTags = computed(() => {
  if (selectedCategory.value === 1) {
    return postTag.value;
  } else if (selectedCategory.value === 2) {
    return topicTag.value;
  }
  return []; // 默认返回空数组
});

// 发帖功能
const submit = async () => {
  // 发布攻略帖
  if (selectedCategory.value === 1) {
    // 数据封装
    const postData = {
      user_id: userId,
      category_id: selectedCategory.value,
      title: title.value,
      content: content.value,
      status: "正常",
    };
    try {
      const res = await addPostService(postData);
      router.push("/profile");
    } catch (err) {
      console.log(err);
    }
  }
  // 发布讨论贴
  else if (selectedCategory.value === 2) {
    // 数据封装
    const topicData = {
      user_id: userId,
      category_id: selectedCategory.value,
      title: title.value,
      content: content.value,
      is_pinned: 0,
      is_closed: 0,
    };
    try {
      const res = await postTopicsService(topicData);
      router.push("/profile");
    } catch (err) {
      console.log(err);
    }
  }
};
</script>

<template>
  <!-- 主要内容 -->
  <div class="container main-content">
    <div class="content-grid">
      <!-- 发帖表单 -->
      <div>
        <div class="post-form-card">
          <div class="post-form-content">
            <h1 class="form-title">发布新主题</h1>
            <!-- 标题输入 -->
            <div class="form-group">
              <label for="title" class="form-label">标题</label>
              <input
                type="text"
                id="title"
                class="form-input"
                placeholder="请输入标题（5-100字）"
                v-model="title"
              />
            </div>
            <!-- 分类选择 -->
            <div class="form-group">
              <label class="form-label">类别</label>
              <div class="form-radio-group">
                <div class="form-radio" v-for="(item, index) in category" :key="item.id">
                  <input
                    type="radio"
                    :id="item.description"
                    name="category"
                    :value="item.id"
                    v-model="selectedCategory"
                  />
                  <label :for="item.description">{{ item.name }}</label>
                </div>
              </div>
            </div>
            <!-- 标签输入 -->
            <!-- <div class="form-group">
              <label for="tags" class="form-label">标签</label>
              <input
                type="text"
                id="tags"
                class="form-input"
                placeholder="请输入标签，用逗号分隔"
              />
              <p class="form-tip">最多添加5个标签，每个标签不超过10个字</p>
            </div> -->

            <!-- 标签 -->
            <div class="form-group" v-if="selectedCategory">
              <label class="form-label">标签</label>
              <div class="form-radio-group">
                <div
                  class="form-radio"
                  v-for="(item, index) in currentTags"
                  :key="item.id"
                >
                  <input type="radio" :id="'tag-' + item.id" name="tags" />
                  <label :for="'tag-' + item.id">{{ item.name }}</label>
                </div>
              </div>
            </div>

            <!-- 内容编辑器 -->
            <div class="form-group">
              <label class="form-label">内容</label>
              <div class="editor-toolbar">
                <button>
                  <svg
                    width="20"
                    height="20"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                </button>
                <button>
                  <svg
                    width="20"
                    height="20"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
                    />
                  </svg>
                </button>
                <button>
                  <svg
                    width="20"
                    height="20"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                </button>
              </div>
              <div class="editor-content">
                <textarea
                  class="form-textarea"
                  rows="15"
                  placeholder="请输入正文内容..."
                  v-model="content"
                ></textarea>
              </div>
            </div>
            <!-- 发布选项 -->
            <div class="form-options">
              <div class="form-radio">
                <input type="checkbox" id="anonymous" class="form-checkbox" />
                <label for="anonymous" class="form-checkbox-label">匿名发布</label>
              </div>
              <div class="form-radio">
                <input type="checkbox" id="notification" class="form-checkbox" />
                <label for="notification" class="form-checkbox-label">接收回复通知</label>
              </div>
            </div>
            <!-- 发布按钮 -->
            <div class="form-actions">
              <button class="btn">保存草稿</button>
              <button class="btn btn-primary" @click="submit">发布主题</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 发帖提示 -->
        <div class="sidebar-card">
          <div class="sidebar-content">
            <h3 class="sidebar-title">发帖提示</h3>
            <ul class="sidebar-list">
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  /></svg
                >标题要简洁明了，突出主题
              </li>
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  /></svg
                >选择合适的分类，方便他人查找
              </li>
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  /></svg
                >添加相关标签，提高曝光度
              </li>
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  /></svg
                >内容要详细具体，便于交流
              </li>
            </ul>
          </div>
        </div>
        <!-- 社区规范 -->
        <div class="sidebar-card">
          <div class="sidebar-content">
            <h3 class="sidebar-title">社区规范</h3>
            <ul class="sidebar-list">
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  /></svg
                >禁止发布广告、色情、暴力等内容
              </li>
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  /></svg
                >禁止人身攻击和恶意评论
              </li>
              <li>
                <svg
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  /></svg
                >禁止发布与游戏无关的内容
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f9fafb;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
/* 导航栏 */
.navbar {
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 0 1rem;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-logo {
  height: 2rem;
  width: auto;
}
.navbar-title {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #059669;
}
.navbar-nav {
  display: none;
}
.nav-link {
  color: #6b7280;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.nav-link.active,
.nav-link:focus {
  color: #111827;
  border-bottom-color: #059669;
}
.nav-link:hover {
  color: #374151;
  border-bottom-color: #d1d5db;
}
.login-btn {
  background-color: #059669;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.login-btn:hover {
  background-color: #047857;
}
/* 主体布局 */
.main-content {
  padding: 2rem 0;
}
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .content-grid {
    grid-template-columns: 2fr 1fr;
  }
  .sidebar {
    margin-top: 0;
  }
}
/* 发帖表单 */
.post-form-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.post-form-content {
  padding: 1.5rem;
}
.form-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111827;
  margin-bottom: 1.5rem;
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
}
.form-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-radio {
  display: flex;
  align-items: center;
}
.form-radio input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: #059669;
}
.form-radio label {
  margin-left: 0.5rem;
  font-size: 0.95rem;
  color: #374151;
}
.form-tip {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
/* 编辑器 */
.editor-toolbar {
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  background-color: #f3f4f6;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.editor-toolbar button {
  background: none;
  border: none;
  color: #6b7280;
  border-radius: 0.375rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.editor-toolbar button:hover {
  background: #e5e7eb;
  color: #059669;
}
.editor-content {
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.form-textarea {
  min-height: 10rem;
  resize: vertical;
}
/* 发布选项 */
.form-options {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.form-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: #059669;
}
.form-checkbox-label {
  margin-left: 0.5rem;
  font-size: 0.95rem;
  color: #374151;
}
/* 发布按钮组 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn:hover {
  background: #f3f4f6;
}
.btn-primary {
  background: #059669;
  color: white;
  border: none;
}
.btn-primary:hover {
  background: #047857;
}
/* 侧边栏 */
.sidebar {
  margin-top: 2rem;
}
.sidebar-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 2rem;
}
.sidebar-content {
  padding: 1.5rem;
}
.sidebar-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1rem;
}
.sidebar-list {
  list-style: disc inside;
  padding-left: 0;
  margin: 0;
}
.sidebar-list li {
  font-size: 0.95rem;
  color: #374151;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
}
.sidebar-list svg {
  margin-right: 0.5rem;
  min-width: 1.25rem;
}
.sidebar-list .text-green-500 {
  color: #059669;
}
.sidebar-list .text-red-500 {
  color: #ef4444;
}
/* 页脚 */
.footer {
  background-color: white;
  margin-top: 3rem;
  padding: 3rem 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -0.5rem -1.25rem;
}
.footer-link {
  padding: 0.5rem 1.25rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 1rem;
}
.footer-link:hover {
  color: #111827;
}
.footer-copyright {
  text-align: center;
  color: #9ca3af;
  font-size: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .navbar-nav {
    display: flex;
    gap: 2rem;
  }
}
</style>
